<app-progress-line *ngIf="isRequesting"></app-progress-line>
<app-error-message *ngIf="response && response.error">
  {{response.error.message}}
</app-error-message>
<div class="container-login">

  <div class="wrap-login">
    
    <form>
      <div class="login-header">
        <span>
          Join to IOT Dashboard
        </span>
        <p>
          The best way to manage and monitoring you IOT devices.
        </p>
      </div>

      <div class="form-group material-input">
        <input class="app-signup-form-email" autocomplete="off" type="text" material-input name="email" value="" [(ngModel)]="form.email">
        <span class="focus-input" data-placeholder="Email"></span>
        <span class="error-message" *ngIf="error(response, 'email')">{{error(response, 'email')}}</span>
      </div>
      
      <div class="form-group material-input">
        <span class="btn-show-pass" (click)="togglePassword();">
          <i [ngClass]="{'icon-visibility_off': passwordVisibilty, 'icon-visibility': (!passwordVisibilty)}"></i>
        </span>
        <input class="app-signup-form-password" autocomplete="off" [type]="passwordVisibilty ? 'text' : 'password'" material-input name="password" [(ngModel)]="form.password">
        <span class="focus-input" data-placeholder="Password"></span>
        <span class="error-message" *ngIf="error(response, 'password')">{{error(response, 'password')}}</span>
      </div>

      <p class="signup-info">
          By clicking on "Signup" below, you are agreeing to the
          <a routerLink="/privacy-policy">Privacy Policy</a>.
      </p>

      <div class="form-group login-button">
        <button class="btn btn-primary app-signup-form-submit" (click)="signup($event);">
          Signup
        </button>
      </div>

      <div>
        Do you have an account?
        <a routerLink="/login">
          Login
        </a>
      </div>
    </form>
  </div>
</div>